"use client";
import { domAnimation, LazyMotion, m, motion } from "motion/react";
import Image from "next/image";

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col -mt-30 ">
      {/* 导航栏 */}
      <LazyMotion features={domAnimation}>
        <m.div animate={{ opacity: 1 }}>
          <img
            src="https://camp.muji.com/static/98ead72ee926d9e2309c4d5f2fb1213b/eb319/hero-desktop.webp"
            alt=""
            width={1920}
            height={1080}
          />
        </m.div>
      </LazyMotion>

      {/* 动画演示 */}

      {/* 英雄区域 */}
      <section className="py-20 px-4 bg-gradient-to-b from-background to-blue-50 dark:from-background dark:to-blue-950/20">
        <div className="container mx-auto max-w-6xl text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
            開発中...
            <br />
            学習目的のみであり、公式なものではありません
            <p>Next.js + Tailwind CSS + Motion</p>
          </h1>
          電子メールアドレス：yanceykang@gmail.com
        </div>
      </section>
    </div>
  );
}
